<template>
	<view class="addFriend">
		<view class="head">
			<view class="head_li">
				<uni-icons type="back" size="30" color="#fff" class="icon_back" @click="navigBack"></uni-icons>
				<view class="head_name">
					<text>找人/找群</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="search">
				<view class="input" @click="NavigatorSearch">
					<view class="text">
						<up-icon name="search" size="30" color="#cecece"></up-icon>
						<text>轩号/手机号</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="l_head">
					<text class="one">可能想认识的人</text>
					<view class="right">
						<text>查看更多</text>
						<uni-icons type="forward" size="20" color="#d3d3d3" class="icon"></uni-icons>
					</view>
				</view>
				<view class="item" @click="NavigatorAdd(item)" v-for="(item,i) in info" :key="i">
					<view class="left">
						<image :src="item.avatar"></image>
						<view class="one">
							<text class="name">{{item.nickName}}</text>
							<text class="deta">1位共同好友</text>
						</view>
					</view>
					<view class="add" @click.stop="Add(item)">添加</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import { getCommonFriends, addFriend } from '../../common/api';
	export default {
		computed: {
			...mapState('info', ['myInfo'])
		},
		data() {
			return {
				uid:null,
				info: [],
			};
		},
		onLoad(val) {
			this.uid = val.uid
			this.Init();
		},
		methods: {
			Init(){
				getCommonFriends({uid:this.uid}).then((res)=>{
					if(res.code == 200){
						this.info = res.data;
					}
				})
			},
			navigBack() {
				uni.navigateBack();
			},
			NavigatorSearch(){
				uni.navigateTo({
					url: '/subpkg/Friend_search/Friend_search'
				})
			},
			NavigatorAdd(item){
				uni.navigateTo({
					url: '/subpkg/personal_details/personal_details?fid='+item.id
				})
			},
			Add(){
				uni.showLoading();
				
				addFriend({
					remark: this.remarks,
					msg: this.validate,
					uid: this.myInfo.id,
					fid: this.uid
				}).then((res)=>{
					if(res.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '发送成功',
							duration: 1000
						});
						uni.navigateBack();
					}else{
						setTimeout(()=> {
							uni.hideLoading();
							uni.showToast({
								title: '发送失败',
								duration: 1000,
								icon:"none"
							});
							uni.navigateBack();
						}, 1000);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.addFriend {
		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: fixed;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 120rpx;
				display: flex;
				line-height: 100rpx;
				padding: 0rpx 0rpx;

				.head_name {
					border: 1rpx solid #fff;
					width: 300rpx;
					height: 80rpx;
					margin: 20rpx 140rpx;
					display: flex;
					justify-content: center;
					border-radius: 40rpx;

					text {
						color: #fff;
						font-size: 33rpx;
						opacity: 0.8;
						display: flex;
						line-height: 80rpx;
					}
				}

				.icon_back {
					padding: 15rpx 20rpx;
				}
			}
		}

		.body {
			width: 750rpx;
			position: fixed;
			top: 150rpx;
			height: 100vh;
			background-color: #ededed;

			.search {
				padding: 20rpx;
				background-color: #fff;

				.input {
					width: 700rpx;
					height: 80rpx;
					margin: 20rpx 0;
					background-color: #ededed;
					border-radius: 20rpx;

					.text {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx;
						color: #9e9e9e;
					}
				}
			}

			.list {
				margin-top: 40rpx;
				height: 80vh;
				background-color: #fff;

				.l_head {
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid rgba(224, 224, 224, 0.8);

					.one {
						padding: 0 20rpx;
					}

					.right {
						color: #9c9c9c;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						padding: 0 10rpx;
					}
				}

				.item {
					height: 150rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
					background-color: #fff;
					&:active{
						background-color: #d2d2d2;
					}

					.left {
						display: flex;
						align-items: center;
						
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
						}
						.one{
							display: flex;
							flex-direction: column;
							line-height: 50rpx;
							padding: 20rpx;
							.name{
								font-size: 35rpx;
								font-weight: bold;
								color: #2d2d2d;
							}
							.deta{
								font-size: 28rpx;
								color: #9c9c9c;
							}
						}
					}
					.add {
						width: 150rpx;
						height: 60rpx;
						border: 1rpx solid #d2d2d2;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>